<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.the{width: 200px;height: 800px;}
			.the ul li {list-style: none;width: 200px;height: 50px;font-size: 13px;line-height: 50px;text-align: center;border: 1px solid;border-right: none;}
			.tubiao1{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao1 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -23px;position: absolute;left: 20px;top: 18px;}
			i{width:6px;height:7px;background: url(../img/精灵.png) no-repeat -134px -59px;position: absolute;left: 185px;top: 23px;}
			.tubiao2{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao2 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -54px;position: absolute;left: 20px;top: 18px;}
			.tubiao3{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao3 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -83px;position: absolute;left: 20px;top: 18px;}
			.tubiao4{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao4 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -115px;position: absolute;left: 20px;top: 18px;}
			.tubiao5{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao5 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -145px;position: absolute;left: 20px;top: 18px;}
			.tubiao6{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao6 span{width:18px;height:13px;background: url(../img/精灵.png) no-repeat -20px -176px;position: absolute;left: 20px;top: 18px;}
			.tubiao7{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao7 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -205px;position: absolute;left: 20px;top: 18px;}
			.tubiao8{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao8 span{width:16px;height:13px;background: url(../img/精灵.png) no-repeat -20px -235px;position: absolute;left: 20px;top: 18px;}
			.tubiao9{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao9 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -265px;position: absolute;left: 20px;top: 18px;}
			.tubiao10{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao10 span{width:16px;height:12px;background: url(../img/精灵.png) no-repeat -20px -296px;position: absolute;left: 20px;top: 18px;}
			.tubiao11{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao11 span{width:16px;height:19px;background: url(../img/精灵.png) no-repeat -20px -325px;position: absolute;left: 20px;top: 18px;}
			.tubiao12{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao12 span{width:16px;height:17px;background: url(../img/精灵.png) no-repeat -20px -354px;position: absolute;left: 20px;top: 18px;}
			.tubiao13{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao13 span{width:16px;height:16px;background: url(../img/精灵.png) no-repeat -20px -385px;position: absolute;left: 20px;top: 18px;}
			.tubiao14{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao14 span{width:16px;height:17px;background: url(../img/精灵.png) no-repeat -20px -415px;position: absolute;left: 20px;top: 18px;}
			.tubiao15{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao15 span{width:16px;height:18px;background: url(../img/精灵.png) no-repeat -20px -444px;position: absolute;left: 20px;top: 18px;}
			.tubiao16{position: relative;background: linear-gradient(to right, #ECF1F6,#F8FAFD);}
			.tubiao16 span{width:16px;height:13px;background: url(../img/精灵.png) no-repeat -20px -476px;position: absolute;left: 20px;top: 18px;}
			.tubiao11 a:hover{color: orangered;font-size: 16px;}
		</style>
	</head>
	<body>
		<div class="the">
			<ul>
				<li class="tubiao1"><span></span>设为首页</li>
				<li class="tubiao2"><span></span>资讯<i></i></li>
				<li class="tubiao3"><span></span>财经<i></i></li>
				<li class="tubiao4"><span></span>娱乐<i></i></li>
				<li class="tubiao5"><span></span>体育<i></i></li>
				<li class="tubiao6"><span></span>时尚<i></i></li>
				<li class="tubiao7"><span></span>旅游<i></i></li>
				<li class="tubiao8"><span></span>汽车<i></i></li>
				<li class="tubiao9"><span></span>科技<i></i></li>
				<li class="tubiao10"><span></span>公益<i></i></li>
				<li class="tubiao11"><span></span><a>心香一脉</a><i></i></li>
				<li class="tubiao12"><span></span>军事<i></i></li>
				<li class="tubiao13"><span></span>文化<i></i></li>
				<li class="tubiao14"><span></span>社会<i></i></li>
				<li class="tubiao15"><span></span>论坛<i></i></li>
				<li class="tubiao16"><span></span>知识堂<i></i></li>
			</ul>
		</div>
	</body>
</html>
